<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 400px;
            height: 515px;
            margin: 50px auto;
            text-align: center;
        }
        
        span {
            float: left;
            font-size: 20px;
            text-align: center;
            line-height: 68px;
            width: 298px;
            height: 68px;
            border: 1px solid;
            color: rgb(189, 111, 10);
        }
        
        p {
            text-align: center;
            height: 45px;
            font-size: 30px;
            color: rgb(14, 123, 212);
        }
        
        table {
            width: 400px;
            height: 400px;
        }
        
        td {
            width: 100px;
            height: 100px;
        }
        
        .rm {
            float: left;
            width: 100px;
            height: 68px;
        }
        
        button {
            width: 100%;
            height: 100%;
            font-size: 25px;
            background-color: aqua;
        }
        
        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div>
        <p>计算器</p>
        <span></span>
        <button class="rm">归零</button>
        <table class="clear">
            <tr>
                <td><button>7</button></td>
                <td><button>8</button></td>
                <td><button>9</button></td>
                <td><button class="result">=</button></td>
            </tr>
            <tr>
                <td><button>4</button></td>
                <td><button>5</button></td>
                <td><button>6</button></td>
                <td><button>+</button></td>
            </tr>
            <tr>
                <td><button>1</button></td>
                <td><button>2</button></td>
                <td><button>3</button></td>
                <td><button>-</button></td>
            </tr>
            <tr>
                <td><button>0</button></td>
                <td><button>·</button></td>
                <td><button>×</button></td>
                <td><button>÷</button></td>
            </tr>
        </table>
    </div>
    <script>
        var btns = document.getElementsByTagName('button')
        var result = document.getElementsByClassName('result');
        var text = document.getElementsByTagName('span');
        var rm = document.getElementsByClassName('rm');

        // 记录操作数
        var str = '';
        // 记录操作符
        var opt = ''

        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function() {
                for (var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = 'aqua';
                }
                this.style.backgroundColor = 'white';
                var str1 = this.innerHTML;
                if (str1 == '=' || str1 == '删除') {
                    str = str + '';
                } else {
                    if (str1 == '+' || str1 == '-' || str1 == '×' || str1 == '÷') {
                        var count = getStrCount(str, ',');
                        if (str == '' || count >= 2) {
                            alert('操作错误，请按照[ 操作数1 操作符 操作数2 = 结果]的格式进行操作！');
                            str = '';
                            opt = '';
                        } else {
                            opt = str1;
                            str = str + ',';
                        }
                    } else {
                        str = str + str1;
                        var n = str.indexOf(',');
                        if (n > -1) {
                            var a = str.split(',');
                            text[0].innerText = a[0] + opt + a[1];
                        } else {
                            text[0].innerText = str;
                        }
                    }
                }
            });
        }

        result[0].addEventListener('click', function() {
            if (!(str && opt)) {
                alert('操作错误，请按照[ 操作数1 操作符 操作数2 = 结果 ]的格式进行操作！');
            } else {
                var arr = str.split(',');
                var param1 = parseFloat(arr[0]);
                var param2 = parseFloat(arr[1]);
                var r;
                switch (opt) {
                    case '+':
                        r = param1 + param2;
                        break;
                    case '-':
                        r = param1 - param2;
                        break;
                    case '×':
                        r = param1 * param2;
                        break;
                    case '÷':
                        r = param1 / param2;
                        break;
                    default:
                        break;
                }
                text[0].innerText = r;
                str = r.toString();
                opt = '';
            }
        });

        rm[0].addEventListener('click', function() {
            text[0].innerText = '';
            str = '';
            opt = '';
        });

        //scrstr 源字符串 armstr 特殊字符
        function getStrCount(scrstr, armstr) {
            var count = 1;
            while (scrstr.indexOf(armstr) != -1) {
                scrstr = scrstr.replace(armstr, '')
                count++;
            }
            return count;
        }
    </script>
</body>

</html>